[자바스크립트] in 연산자 사용하는 방법과 응용

Last Modified : 2021-03-21 / Created : 2021-03-21

7,546
View Count

주소 복사하기

자바스크립트의 in 연산자(operator)의 쓰임과 활용에 대하여 간략하게 알아보려고 합니다.

# 자바스크립트 in 연산자 알아보기

먼저 in연산자는 아래와 같이 사용됩니다.

in 연산자
// 객체가 가지고 있는 프로퍼티 및 메소드의 존재 여부를 Boolean으로 반환함

이처럼 객체에 사용할 경우 in 연산자는 해당 객체의 프로퍼티와 함수의 존재 여부를 쉽고 간단하게 확인이 가능합니다. 그럼 어떻게 확인할 수 있는지 아래에서 알아봅니다.

! 객체에 in 연산자 사용 예제

예를들어 아래 예제처럼 myObj 객체를 만들어 테스트를 해보도록 하겠습니다.

myObj = {
no: 1,
name: 'webisfree',
getName: function() { return this.name; }
}

이제 no, name, getName이 존재하는지 아래와 같이 테스트 해보도록 하겠습니다.

'no' in myObj;
'name' in myObj;
'getName' in myObj;
'url' in myObj;

// true
// true
// true
// false

결과를 보면 url은 해당 객체에 존재하지 않기 때문에 in 연산자를 사용한 결과는 false를 반환하게 됩니다.

참고로 배열 역시 객체 이므로 in을 사용하는 것이 가능합니다. 다음으로 in은 언제 사용할까요?

@ in은 언제 많이 사용될까...
in의 쓰임은 다양할 수 있지만 특정 메소드, 프로퍼티의 존재 여부를 검증하기 위한 목적으로 많이 사용됩니다. 즉 없는 메소드, 프로퍼티를 동작할 경우 에러가 발생할 수 있으므로 사전에 여부를 먼저 확인하기 위한 목적이 큽니다. 예를들어 제곱의 값을 구하기 위해 아래와 같이 함수를 만들 경우 in 연산자를 사용할 수 있겠죠.

objA = {
num: 2
};
doubleNum = function(objA) {
if (!('num' in objA)) return 0;
return objA.num * objA.num;
};

doubleNum(objA);
// 4를 반환

위의 함수 doubleNum()을 살펴보면 아래의 코드가 존재합니다.

if (!('num' in objA)) return 0;

이 코드는 objA에 num이 존재하는지 확인하고 그 반대값을 얻기 위해 !를 사용하였습니다. 즉 num이 없는 경우 항상 0을 반환하게 됩니다.

이제 빈 객체 objB를 만들고 동일하게 함수를 수행합니다. objB는 num 값이 없으므로 0을 반환하겠죠.

objB = {
};

doubleNum(objB);
// 0을 반환

예상대로 0을 반환하였습니다. 이처럼 in을 사용하여 값의 여부를 확인하는 코드를 추가할 경우 에러를 방지할 수 있습니다. 즉 객체의 특정 값이 존재하지 않으면 더 이상 실행하지 않으면 함수의 예상치 못한 에러를 발생하지 않지 않도록 코드를 중단할 수 있죠. 또한 반환 타입을 항상 숫자로 사용할 수 있어 타입 에러 목적으로도 사용할 수 있습니다.

! 마치면서

이처럼 in을 사용할 수도 있지만 그 대신에 hasOwnProperty()를 사용할 수도 있습니다. 비슷하게 사용할 수 있지만 in이 더 짧다는 점 이 외에도 큰 차이점이 있습니다. 바로 hasOwnProperty()는 그 이름처럼 프로토타입 체인에 따르는 상속된 속성에 다른 결과를 반환한다는 점입니다. 간단하게 아래와 같이 서로 다른 결과가 나타날 수 있습니다.

'toString' in objA
// true를 반환

objA.hasOwnProperty('toString')
// false를 반환

objA는 toString()을 사용할 수 있지만 objA가 소유한 객체는 아니죠. 이런 이유로 in에서는 true를 hasOwnProperty()는 false의 결과가 나타나게 되었습니다.

즉 hasOwnProperty()는 실제 객체가 가진 프로퍼티나 메소드 값만 확인하여 true/false를 반환하게 됩니다.

여기까지 in 연산자에 대하여 알아보았습니다.